<!DOCTYPE html>
<html lang="en">
  <head>
    <title>crayon - input example</title>
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="my-canvas" width="400" height="400"></canvas>

    <script src="../crayon.min.js"></script>
    <script>

      var canvas = new crayon.Canvas({ id: "my-canvas" });

      // create a sprite
      var red = new crayon.Rectangle({
        width: 200,
        height: 100,
        color: '#f00',
        x: 200,
        y: 100,
        stroke: 1,
        input: true
      });

      red.on('mousedown touchstart', function(){
        this.set({color: '#400'});
      });

      red.on('mouseup mouseleave touchend', function(){
        this.set({color: '#f00'});
      });

      var green = new crayon.Rectangle({
        width: 100,
        height: 200,
        color: '#0f0',
        x: 200,
        y: 200,
        stroke: 1,
        rotation: Math.PI / 4,
        scaleX: 1.5,
        scaleY: 0.75,
        input: true
      });

      green.on('mousedown touchstart', function(){
        this.set({color: '#040'});
      });

      green.on('mouseup mouseleave touchend', function(){
        this.set({color: '#0f0'});
      });

      var blue = new crayon.Circle({
        radius: 75,
        color: '#00f',
        x: 200,
        y: 300,
        stroke: 1,
        scaleX: 1.5,
        scaleY: 0.75,
        rotation: Math.PI * 0.75,
        angle: Math.PI * 1.5,
        input: true
      });

      blue.on('mousedown touchstart', function(){
        this.set({color: '#004'});
      });

      blue.on('mouseup mouseleave touchend', function(){
        this.set({color: '#00f'});
      });

      var logo = new crayon.Sprite({
        src: 'img/crayon.png',
        x: 200,
        y: 200,
        rotation: Math.PI / 4,
        scaleX: 1.3,
        scaleY: 1.3,
        input: true
      });

      logo.on('mousedown touchstart', function(){
        this.filter('colorOverlay', new crayon.Color(0, 0, 0, 0.5));
      });

      logo.on('mouseup mouseleave touchend', function(){
        this.removeFilter();
      });

      // add items to the canvas
      canvas.add(red, green, blue, logo);

      // the magic happens here!
      crayon.timer.on('frame', function(time) {

      });

    </script>
  </body>
</html>